<template>
  <div>
    <div class="danpin center">
      <div class="biaoti center">小米明星单品</div>
      <div class="main center">

        <div class="mingxing fl" v-for="product in product_list">

            <div class="sub_mingxing" v-for="image in product.img " @click="check_detail(product.id)"><a >
            <img :src='image' alt="">
          </a></div>
          <div class="pinpai"><a href="">{{product.name}}</a></div>
          <div class="youhui">5月9日-21日享花呗12期分期免息</div>
          <div class="jiage">{{product.prize}} 元</div>
        </div>
        <div class="clear"></div>
        <div>
          <button v-if="previous_page" @click="go_previous_page">上一页</button>
          <button v-if="next_page" @click="go_next_page">下一页</button>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name: "banner",
    data: function () {
      return {
        product_list: '',
        page: '',
        next_page: false,
        previous_page: false
      }
    },
    methods: {
      get_products: function () {
        // 获取url 当中的参数
        this.$axios.get('http://127.0.0.1:8070/get_product_list/', {
          params: {
            page: this.$route.query.page
          }
        }).then(response => {
          this.product_list = response.data.product_massage
          if (response.data.previous_page === 0) {
            this.previous_page = true;
          }
          if (response.data.next_page === 0) {
            this.next_page = true;
          }
        })
      },

      go_next_page: function () {
          this.$router.push({
             path: '/index',
            query: {
               page: Number(this.page) + 1
            }
          })
        window.location.reload()
      },
      go_previous_page: function () {
        this.$router.push({
          path: '/index',
          query: {
              page: Number(this.page) - 1
          }
        })
        window.location.reload()
      },
      check_detail: function (product_id) {
        this.$router.push({
          path: '/detail',
          query: {
            id: Number(product_id)
          }
        })
      }
    },
    mounted() {
      if ( ! this.$route.query.page) {
        this.page = 1
      }else {
        this.page = this.$route.query.page
      }
      this.get_products()
      
    },

  }

</script>

<style scoped>
  @import '../../assets/css/style.css';
</style>
